<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml"
	xmlns:ui="http://java.sun.com/jsf/facelets"
	xmlns:h="http://java.sun.com/jsf/html"
	xmlns:f="http://java.sun.com/jsf/core"
	xmlns:p="http://primefaces.prime.com.tr/ui">

<f:view>
	<ui:composition template="../_template.xhtml">
		<ui:define name="title">
		Pesquisa de Ligações - Ctrl.Liberty
	</ui:define>

	<ui:define name="content">
			<h:form>
			
			<h2>Pesquisa de Ligações</h2>
			
			<div id="divPesquisa" style="padding-bottom:10px">
								
				<p:fieldset legend="Filtros da Pesquisa">
					<div style="float:left">
						<h:panelGrid columns="3">
							<h:panelGroup>
								<h:outputLabel value="Telefone Principal" >*:</h:outputLabel>
								<h:selectOneMenu value="#{pesquisaLigacao.idTelefone}" style="width:145px">
									<f:selectItems var="tel" itemValue="#{tel.id}" itemLabel="#{tel.numero}" value="#{pesquisaLigacao.listaTelefone}" />
								</h:selectOneMenu>		
							</h:panelGroup>
							
							<h:panelGroup>
								<h:outputLabel value="DDD Remoto">:</h:outputLabel>
								<p:inputMask value="#{pesquisaLigacao.campos.numeroDDD}"  mask="(999)" />
							</h:panelGroup>
							
							<h:panelGroup>
								<h:outputLabel value="Número Remoto">:</h:outputLabel>
								<p:inputMask value="#{pesquisaLigacao.campos.numeroRemoto}" mask="9999-9999" />
							</h:panelGroup>
							
							<h:panelGroup>
								<h:outputLabel value="Tipo de Ligação">:</h:outputLabel>
								<h:selectOneMenu value="#{pesquisaLigacao.campos.tipoLigSms}" style="width:145px">
									<f:selectItem itemValue="" itemLabel=" "/>								
									<f:selectItem itemValue="ENVIADA" itemLabel="Enviada"/>
									<f:selectItem itemValue="RECEBIDA" itemLabel="Recebida"/>
								</h:selectOneMenu>
							</h:panelGroup>
							
							<h:panelGroup>
								<h:outputLabel value="Data Inicial">*:</h:outputLabel>
								<p:calendar value="#{pesquisaLigacao.campos.dataInicial}">
									<f:converter converterId="dateConverter"/>
								</p:calendar>
							</h:panelGroup>
							
							<h:panelGroup>
								<h:outputLabel value="Data Final">*:</h:outputLabel>
								<p:calendar value="#{pesquisaLigacao.campos.dataFinal}">
									<f:converter converterId="dateConverter"/>
								</p:calendar>
							</h:panelGroup>
						</h:panelGrid>
					</div>
					
					<div style="float:right; margin-top:40px;">
						<h:commandButton action="#{pesquisaLigacao.pesquisarLigacoes}" value="Pesquisar" />
					</div>
					
				</p:fieldset>			
			</div>
					
			<div id="resultadoPesquisa">
				<p:fieldset legend="Resultado da Pesquisa" rendered="#{not empty pesquisaLigacao.listaLigacao}">
					<p:dataTable var="ligacao" value="#{pesquisaLigacao.listaLigacao}" paginator="true" rows="10"
						paginatorTemplate="{CurrentPageReport}  {FirstPageLink} {PreviousPageLink} {PageLinks} {NextPageLink} {LastPageLink} {RowsPerPageDropdown}"
						rowsPerPageTemplate="10">
	
						<f:facet name="header">Ligações</f:facet>
	
						<p:column>
							<f:facet name="header">
								<h:outputText value="Número do Telefone" />
							</f:facet>
							<h:outputText value="( #{ligacao.numeroDDDRemoto} )" /> - <h:outputText value="#{ligacao.numeroRemotoFormatado}" />
						</p:column>
	
						<p:column>
							<f:facet name="header">
								<h:outputText value="Tipo Ligacao" />
							</f:facet>
							<h:outputText value="#{ligacao.tipoLigacao}" />
						</p:column>
						
						<p:column>
							<f:facet name="header">
								<h:outputText value="Duração" />
							</f:facet>
							<h:outputText value="#{ligacao.duracaoLigacao}" >
								<f:convertDateTime pattern="HH:mm:ss"/>
							</h:outputText>
						</p:column>
						
						<p:column>
							<f:facet name="header">
								<h:outputText value="Dia da Semana" />
							</f:facet>
							<h:outputText value="#{ligacao.diaLigacao.dia}" />
						</p:column>
	
						<p:column>
							<f:facet name="header">
								<h:outputText value="Data" />
							</f:facet>
							<h:outputText value="#{ligacao.dataInicioLigacao}">
								<f:converter converterId="dateConverter"/>
							</h:outputText>
							
						</p:column>
						
						<p:column>
							<f:facet name="header">
								<h:outputText value="GPS" />
							</f:facet>
							<h:commandButton action="#{pesquisaLigacao.mostrarCoordenadaGPS}" value="Mostrar Mapa" >
								<f:setPropertyActionListener target="#{pesquisaLigacao.ligacao}" value="#{ligacao}" />
							</h:commandButton>
							
						</p:column>
	
					</p:dataTable>
				</p:fieldset>
			</div>
			<div style="padding: 10px 3px 10px 3px">
				<p:panel header="Coordenada GPS" rendered="#{pesquisaLigacao.ligacao.coordenada != null}">
					<p:gmap id="mapaLigacao" rendered="#{pesquisaLigacao.ligacao.coordenada != null}" zoom="15" type="hybrid" style="width:100%;height:400px" widgetVar="mapaLigacao"  
						center="#{pesquisaLigacao.ligacao.coordenada.latitude},#{pesquisaLigacao.ligacao.coordenada.longitude}" 
		           		model="#{pesquisaLigacao.mapa}" /> 
				</p:panel>
			</div>
			
			
			
			
			
			<p:dialog id="display" header="Coordenada GPS" widgetVar="dlg" width="625" height="450" modal="true" onShow="mapaLigacao.checkResize()">  
				 
			</p:dialog>
					
			</h:form>


		</ui:define>

	</ui:composition>
</f:view>
</html>